<template>
 <div class="tab-detail">
  <el-tabs v-loading="loading" type="border-card" v-model="activeName"  @tab-click="handleSwitchTab">
    <el-tab-pane v-if="tab_pane.base" label="详情" name="base">
      <CompanyBase :id='tab_id_group.base'> </CompanyBase>
    </el-tab-pane>
    <el-tab-pane v-if="tab_pane.structure" label="架构图" name="structure">
      <CompanyOrgChart :id='tab_id_group.structure'> </CompanyOrgChart>
    </el-tab-pane>
    <el-tab-pane v-if="tab_pane.candidate" label="公司人才" name="candidate">
      <CompanyCandidate :id='tab_id_group.candidate'> </CompanyCandidate>
    </el-tab-pane>
    <el-tab-pane v-if="tab_pane.project" label="项目列表" name="project">
      <CompanyProject :id='tab_id_group.project'> </CompanyProject>
    </el-tab-pane>
    <el-tab-pane v-if="tab_pane.contact" label="联系人" name="contact">
      <CompanyContactPeople :id='tab_id_group.contact'> </CompanyContactPeople>
    </el-tab-pane>
    <el-tab-pane v-if="tab_pane.contract" label="合同" name="contract">
      <companyContract :id='tab_id_group.contract'> </companyContract>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>
<script>
import CompanyBase from '@/views/company/components/companyBase'
import CompanyContract from '@/views/company/components/companyContract'
import CompanyContactPeople from '@/views/company/components/companyContactPeople'
import CompanyOrgChart from '@/views/company/components/companyOrgChart'
import CompanyCandidate from '@/views/company/components/companyCandidate'
import CompanyProject from '@/views/company/components/companyProject'
import API from '@/utils/backend_api'
import Static_Data from '@/data/index'

export default {
  name: 'companyDetail',
  components: { CompanyBase, CompanyContract, CompanyContactPeople, CompanyOrgChart, CompanyCandidate, CompanyProject },
  data() {
    return {
      loading: true,
      current_user_id: this.$store.getters.userId,
      current_user_roles: this.$store.getters.roles,
      current_users_group: this.$store.getters.usersList,
      MiniRole: Static_Data.mini_roles,
      tab_id_group: {
        id: '',
        base: '',
        contact: '',
        structure: '',
        candidate: '',
        project: '',
        contract: ''
      },
      activeName: '',
      tab_pane: {
        base: true,
        structure: true,
        contact: true,
        candidate: true,
        project: true,
        contract: true
      },
      business_roles: []
    }
  },
  created() {
    this.loading = true
    const params = this.$route.params
    if (params.id) {
      this.tab_id_group.id = params.id
    } else {
      this.loading = false
      this.$message.error('客户id不存在')
      return
    }
    API.company.business_roles(this.tab_id_group.id).then(response => {
      this.business_roles = response.data
      // bd client_manager 才能查看合同
      if (this.businessOperable() || this.hasRoles(['COMPANY_CONTRACT_MGMT', 'SUPER_ADMIN'])) {
        this.tab_pane.contract = true
      } else {
        this.tab_pane.contract = false
      }
      API.company.indexById(this.tab_id_group.id).then(index_response => {
        if (this.isAllowMiniRole('VIEW_CLIENT', index_response.data)) {
          this.tab_pane.contract = true
          this.$set(this.tab_id_group, this.activeName, params.id)
        }
      })
      if (params.tab) {
        this.activeName = params.tab
      } else {
        this.activeName = 'base'
      }
      this.$set(this.tab_id_group, this.activeName, params.id)
      this.loading = false
    })
  },
  methods: {
    authMiniRole(miniRolekey, dept, office) {
      const isHasMiniRoleOffice = this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_OFFICE + '_' + office)) ||
        this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_OFFICE + '_ALL'))
      const isHasMiniRoleDept = this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_DEPT + '_' + dept)) ||
        this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_DEPT + '_ALL'))
      return isHasMiniRoleOffice && isHasMiniRoleDept
    },
    isAllowMiniRole(key, data) {
      if (data.create_id && data.create_id !== '') {
        let own_user = {}
        this.current_users_group.map(current_item => {
          if (current_item.id === data.create_id) {
            own_user = current_item
          }
        })
        return this.authMiniRole(key, own_user.department_id, own_user.office)
      }
      return false
    },
    hasRoles(roles) {
      return this.current_user_roles.some(item => roles.indexOf(item) >= 0)
    },
    businessOperable() {
      return this.business_roles.some((item) => (item === 'bd' || item === 'client_manager'))
    },
    handleSwitchTab(selected_tab, event) {
      this.activeName = selected_tab.name
      this.tab_id_group[this.activeName] = this.tab_id_group.id
    }
  }
}
</script>
<style scoped>
  .tab-detail {
    padding: 10px 20px;
  }
</style>

